<template>
    <div class="tac">
        <div class="tac-title">
            <h2>我的工作台</h2>
        </div>
        <!--  active-text-color="#ffd04b"
        background-color="#545c64"
        text-color="#fff" -->
        <el-menu
        class="el-menu-vertical-demo"
        default-active="2"
        active-text-color="#ffd04b"
        background-color="#007fa4"
        text-color="#fff"
        router
      >
      <template v-for="menu in menus" :key="menu.id+''">
        <!-- 有子菜单的 -->
          <el-sub-menu  v-if="menu.subMenus && menu.subMenus.length>0" :index="menu.id+''">
            <template #title>
                <el-icon>
                    <component :is="menu.icon"></component>
                </el-icon>
                <span>{{ menu.title }}</span>
            </template>
            <el-menu-item :index="subMenu.url" v-for="subMenu in menu.subMenus" :key="subMenu.id"> 
                <el-icon>
                    <component :is="subMenu.icon"></component>
                </el-icon>
                <span>{{ subMenu.title }}</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 没有子菜单的 -->
          <el-menu-item v-else :index="menu.url">
            <!-- 图标 -->
            <el-icon>
                <component :is="menu.icon"></component>
            </el-icon>
            <span>{{ menu.title }}</span>
          </el-menu-item> 
      </template>
      </el-menu>
    </div>
    
</template>

<script setup>
import {
  Document,
  Menu ,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {ref,reactive} from 'vue'
const menus = ref([
    {
        id:1,
        title:'系统信息管理',
        icon:'Tools',
        url:'/user',
        subMenus:[
            {
                id:11,
                title:'部门管理',
                icon:'HelpFilled',
                url:'/user/list'
            },
            {
                id:12,
                title:'员工管理',
                icon:'Avatar',
                url:'/user/add'
            }
        ]
    },
    {
        id:2,
        title:'班级学员管理',
        icon:'Menu',
        url:'/student',
        subMenus:[
            {
                id:13,
                title:'班级管理',
                icon:'HomeFilled',
                url:'/student/clazz'
            },
            {
                id:14,
                title:'学生管理',
                icon:'UserFilled',
                url:'/student/list'
            }
        ]
    },
    {
        id:3,
        title:'数据统计管理',
        icon:'Histogram',
        url:'/teacher'
    },
])

</script >
<style lang="less" scoped>
.tac-title{
    text-align: center;
    color: #fff;
    margin:20px 
}
.el-menu{
    border-right: none;
}


</style>